<template>
  <div class="height100">
    <Menu
      :menus="menus"
      background-color="#20222a"
      text-color="white"
      :active-text-color="colorMenu"
      router
      :default-active="path"
      :width="asideWidth"
      class="myMenu"
      :collapse="collapse"
      @select="menuSelect"
    >
      <el-row
        type="flex"
        align="middle"
        justify="center"
        :style="firstRowStyle"
        class="my-line"
      >
        <el-col :span="24" style="text-align: center">
          <i class="ali-icon-yu" :style="logoStyle"></i>
        </el-col>
      </el-row>
    </Menu>
  </div>
</template>

<script>
import Menu from '@/components/base/asideMenu3.vue'
export default {
  name: 'Aside',
  components: { Menu },
  props: {},
  data() {
    return {
      firstRowStyle: null,
      menus: null
    }
  },
  computed: {
    headerHeight() {
      return this.$store.state.base.admin.headerHeight
    },
    colorMenu() {
      return this.$store.getters['base/getMenuColor']
    },
    logoStyle() {
      return (
        'color: ' + this.$store.getters['base/getMenuColor'] + ';font-size:25px'
      )
    },
    path() {
      return this.$store.state.base.defaultMenuPath
    },
    asideWidth() {
      return this.$store.state.base.admin.defaultWidth
    },
    collapse() {
      return this.$store.state.base.collapse
    }
  },
  watch: {
    headerHeight: {
      handler() {
        this.firstRowStyle = 'height: ' + this.headerHeight + 'px'
      },
      immediate: true
    }
  },
  created() {
    this.getMenus()
  },
  mounted() {},
  methods: {
    menuSelect(index, path) {
      console.log('index:' + index + ',path:' + path)
    },
    getMenus() {
      this.menus = {
        menuItems: [
          { name: '首页', index: '/', iconClass: 'el-icon-s-home' },
          {
            name: '配置',
            index: '/config',
            iconClass: 'el-icon-setting',
            child: {
              menuItems: [
                {
                  name: 'autoCode',
                  index: '/config/autoCode'
                }
              ]
            }
          },
          {
            name: '模板管理',
            index: '/template',
            iconClass: 'el-icon-setting',
            child: {
              menuItems: [
                {
                  name: 'enjoy',
                  index: '/template/enjoy'
                }
              ]
            }
          },
          {
            name: '库表管理',
            index: '/db',
            iconClass: 'el-icon-s-data',
            child: {
              menuItems: [
                {
                  name: '数据库',
                  index: '/db/database'
                },
                {
                  name: '数据表',
                  index: '/db/table'
                },
                {
                  name: '代码生成',
                  index: '/db/code'
                }
              ]
            }
          }
        ]
      }
    }
  }
}
</script>

<style scoped>
.my-line {
  border-bottom: #2c2e39 1px solid;
  color: #a5a5a9;
}
</style>
